<template>
    <div>
        <TopNav :obj="obj"></TopNav>
        <div class="month">
            月份选择：<el-date-picker v-model="pageObj.date" type="month" placeholder="选择月" @change="changeFn"
                :value-format="'YYYY' + '-' + 'MM'" />
        </div>
        <PayTable :tableData="tableData" :total="total" :pageObj="pageObj"></PayTable>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted } from "vue"
import TopNav from '../../components/TopNav.vue';
import PayTable from './components/PayTable.vue'
import { $GetPayData } from '../../api'
export default defineComponent({
    name: 'PayRecord',
    components: { TopNav, PayTable },
    setup() {
        const Data= reactive({
            obj: {
                path: '计费',
                title: '充值记录',
                msg: '展示当前账户的消费额度的所有充值记录。'
            },
            tableData: [],
            pageObj: {
                currPage: 1,
                pageSize: 5,
                date: ''
            },
            total: 1
        })
        onMounted(() => {
            getData()
        })
        const getData = () => {
            $GetPayData(Data.pageObj).then(res => {
                Data.tableData = res.data.data
                Data.total = res.data.total
            })
        }
        const changeFn = () => {
            getData()
        }

        return { ...toRefs(Data), changeFn }
    }

});
</script>

<style lang="less" scoped>
.month {
    background: #fff;
    padding: 15px 50px;
}
</style>